<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>确认订单</title>
    <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0.maximum-scale=1.0,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="shopping/css/reset.css">
    <link rel="stylesheet" href="shopping/css/index.css">
    <link rel="stylesheet" href="shopping/css/flexible.css">
    <link rel="stylesheet" href="css/vant.css">
    <script src="shopping/js/flexible.js"></script>
    <script src="js/vue/vue.js"></script>
    <script src="js/vue/axios.js"></script>
	<script src="js/vue/MD5.js"></script>
    <script src="js/vue/vant.js"></script>
    <script src="js/vue/qs.js"></script>
</head>
<body class="order" style="margin-bottom:0.5rem;">
<div id="app">
    <div class="common clearfix height38 title_back">
        <a href="shopList.html" class="lf color0 shopping_left postion">
            <img class="shopping_left_img" src="shopping/images/baileft.png">
            <span class="back">返回</span>
        </a>
        确认订单
    </div>
    <div class="distribution" style="margin-top:0.2rem;">
        <p class="mode"><span>配送方式</span><span class="marginleft10">到店自取</span></p>
        <p class="address">
            <!-- <span>店名</span> -->
            <span>{{dataList.vname}}</span></p>
        <div class="address">
            <!-- <span>地址</span> -->
            <span>{{dataList.address}}</span></div>
       
    </div>
    <div class="order_message clearfix" v-for="(item,index) in dataList.list">
        <div class="left_order">
            <img :src="item.Picurl">
        </div>
        <div class="right_order clearfix">
            <p class="order_title">{{item.Goodsname}}</p>
            <!-- <p class="sales">
                <span>颜色：</span><span class="marginright10">粉色</span>
                <span>尺码：</span><span class="marginright10">L</span>
            </p> -->
            <p class="bottom_content">
                <span class="price_Icon colors">￥</span><span class="details_price colors unitPrice">{{item.Price}}</span>
                <span class="rf add_order">
                    <span @click="reduce(item.id)" class="reduce">
                        <img v-if="item.Num>1" src="shopping/images/reduce2.png" />
                        <img v-else src="shopping/images/reduce3.png" />
                    </span>
                    <span class="numbers">{{item.Num}}</span>
                    <span @click="addNumber(item.id)" class="addNumber"><img   src="shopping/images/add1.png" /></span>
                </span>
            </p>
            <p class="all_order">
                <span class="rf">
                    <span>总价</span>
                    <span class="price_Icon">￥</span>
                    <span class="details_price all_nuber">{{item.Num*item.Price}}</span>
                </span>
                <span class="rf marginright02">
                    <span>共&nbsp;</span><span class="number">{{item.Num}}</span><span>&nbsp;件商品</span>
                </span>
            </p>
        </div>
        <div class="leavingMessage clearfix">
            <p class="lf">卖家留言</p>
            <img class="rf" src="shopping/images/right_icon.png">
            <p class="rf marginright20" @click="currIndexs(index)">点击后添加留言</p>
            <div class="message" v-if="currIndex==index">
                <textarea  maxlength="100" v-model="item.Leave" id="orgAuditDesc" name="orgAuditDesc" placeholder="请输入留言内容"></textarea>
                <p class="rf wordNumber">最多输入<span id="text-count">{{number}}</span>字</p>
            </div>
        </div>
    </div>
    <div class="sumbit">
        <p class="lf"><span>应付 ￥</span><span class="all_nuber">{{totalPrice}}</span></p>
        <p class="rf" @click="payment">去付款</p>
    </div>
</div>
</body>
<script src="js/jquery-3.3.1.min.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        id:'',
        dataList:{},
        isHide:false,
        msgM:'添加成功',
        toatlShop:'',
        totalNum:'',
        totalPrice:'',
        currIndex:'-1',
        isAllSelect:'0',
        number:100
    },
    created(){
        this.setCanS()
    },
    methods:{
        //设置参数
        setCanS(){
            let Request = new Object()
            Request = GetRequest()
            this.id = Request['id']
            this.getlists()
        },
        getlists(){
            const params={
                id:this.id
            }
            getVs()
            axios.post('/mobileapi/member/goods.php?act=add_order',Qs.stringify(params)).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        _this.$message({
                            message: msg,
                            type: 'error'
                        });
                    } else {
                        //window.vant.Toast.clear();
                        data=data.data.data
                        this.dataList=data
                        this.alltotal()
                        for(let i in this.dataList.list){
                            if(i==0){
                                Vue.set(this.dataList.list[i],'Leave','');
                            }else{
                                Vue.set(this.dataList.list[i],'Leave','');
                            }
                        }
                        let ordernum=data.ordernum
                        sessionStorage.setItem('ordernum',ordernum)
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        addShopping(id){
            //console.log(this.vids)
            const params={
                gid:id
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=add_goodscard',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        this.isHide=true
                        this.msgM="添加失败"
                        this.timers=setTimeout(this.hide, 2000)
                    } else {
                        this.isHide=true
                        this.msgM="添加成功"
                        this.timer=setTimeout(this.hide, 2000)
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        hide(){
            this.isHide=false
        },
        reduce(id){
            //console.log(this.vids)
            const params={
                id:id,
                type:'1'
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=char_add',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        this.isHide=true
                        this.msgM="添加失败"
                        this.timers=setTimeout(this.hide, 2000)
                    } else {
                        for(let i in this.dataList.list){
                            if(this.dataList.list[i].id==id&&this.dataList.list[i].Num>1){
                                this.dataList.list[i].Num--
                            }
                        }
                        this.alltotal()
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        addNumber(id){
            //console.log(this.vids)
            const params={
                id:id,
                type:'0'
            }
            getVs()
            axios.get('/mobileapi/member/goods.php?act=char_add',{params:params}).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                      
                    } else {
                        for(let i in this.dataList.list){
                            if(this.dataList.list[i].id==id){
                                this.dataList.list[i].Num++
                            }
                        }
                        this.alltotal()
                    }
                }).catch(function (error) {
                console.log(error); 
            })
        },
        //购物车商品去支付
        payment(){
            console.log(this.dataList)
            let from=JSON.stringify(this.dataList)
            let sign=md5(from)
            const params={
                from:from,
                sign:sign
            }
            getVs()
            axios.post('/mobileapi/member/goods.php?act=payorder',Qs.stringify(params)).then(data =>{
                console.log(data.data)
                let { msg, code,user} = data.data
                    if (code !== 200) {
                        window.vant.Toast.fail(msg)
                    } else {
                        let Gtoken=sessionStorage.getItem('token')
                        window.location.href=data.data.data.payurl+"&Bacurl=http%3a%2f%2ffitness.guanjialc.com%2fphone%2fmember%2fshopList.html"
                    }
                }).catch(function (error) {
                console.log(error);
            })
        },
        //计算总价
        alltotal(){
            let totalPrice=0
            let totalNum=0
            //let totalSumAll = 0;
            for(let i in this.dataList.list){
                totalPrice+=parseFloat(this.dataList.list[i].Price)*parseInt(this.dataList.list[i].Num)
                totalNum+=parseInt(this.dataList.list[i].Num)
            }
            this.totalPrice=totalPrice
            this.totalNum=totalNum
        },
        back(){
            window.location.href='shoplist.html'
        },
        //留言的显示
        currIndexs(index){
            this.currIndex=index
        }
    }
})
</script>
</html>